<template>
 
  <div class="title">
    <div class="step-form-form">
      <Steps :current="current">
        <Steps.Step title="客户选择" />
        <Steps.Step title="模板选择" />
        <Steps.Step title="模板明细确认" />
        <Steps.Step title="信息确认" />
        <Steps.Step title="完成" />
      </Steps>
    </div>
    <div class="mt-5">
      <Step1 @next="handleStep1Next" v-show="current === 0" v-if="state.initStep1"/>
      <Step2
        @prev="handleStepPrev"
        @next="handleStep2Next"
        v-show="current === 1"
        v-if="state.initStep2"
      />
      <Step3 
        :data="step2Data"
        :dataStr="dataStr"
        @prev="handleStep3Prev"
        @next="handleStep3Next"
        v-show="current === 2" 
        v-if="state.initStep3" />
      <Step4 
        :data="step1Data"
        :modelList="step2Data"
        @prev="handleStep4Prev"
        @next="handleStep4Next"
        v-show="current === 3" 
        v-if="state.initStep4" />
      <Step5 :data="step1Data" v-show="current === 4" @redo="handleRedo" @prev="handleStepPrev" v-if="state.initStep5" />
    </div>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsSettingPricemodelWecharPriceModelUseStepIndex',
  });
</script>
<script lang="ts" setup>
  import { ref, reactive, defineComponent } from 'vue';
  import Step1 from './Step1.vue';
  import Step2 from './Step2.vue';
  import Step3 from './Step3.vue';
  import Step4 from './Step4.vue';
  import Step5 from './Step5.vue';
  import { Steps } from 'ant-design-vue';

  // defineOptions({ name: 'FormStepPage' });
  let step1Data = ref({})
  let step2Data = ref([])
  let step3SlIds = ref('')
  let dataStr = ref('')

  const current = ref(0);

  const state = reactive({
    initStep1: true,
    initStep2: false,
    initStep3: false,
    initStep4: false,
    initStep5: false,
  });

  function handleStep1Next(step1Values: any) {
    current.value++;
    state.initStep2 = true;
    step1Data.value = step1Values
    console.log(step1Values);
  }

  function handleStepPrev() {
    current.value--;
  }

  function handleStep3Prev() {
    current.value--;
    // state.initStep3 = false;
  }

  function handleStep4Prev() {
    current.value--;
    state.initStep4 = false;
  }
  

  function handleStep2Next(step2Values: any) {
    dataStr.value = ''
    current.value++;
    state.initStep3 = true;
    step2Data.value = step2Values
    step2Data.value.forEach(element => {
      dataStr.value += element.code
    });
    console.log(step2Values);
  }
  function handleStep3Next(step3Values: any) {
    current.value++;
    state.initStep4 = true;
    console.log(step3Values);
  }
  function handleStep4Next(step4Values: any) {
    current.value++;
    state.initStep5 = true;
    console.log(step4Values);
  }

  function handleRedo() {
    state.initStep1 = false;
    setTimeout(()=>{
      current.value = 0;
      state.initStep1 = true;
      state.initStep2 = false;
      state.initStep3 = false;
      state.initStep4 = false;
      state.initStep5 = false;
    },500)
    
  }
</script>
<style lang="less" scoped>
  .step-form-content {
    padding: 24px;
    background-color: @component-background;
  }

  .step-form-form {
    width: 1200px;
    margin: 0 auto;
  }

  .title {
    width: 100%;
    height: calc(100vh - 120px) ;
    background: #fff;
    padding: 20px;
    /* font-size: 60px;
    font-weight: bold;
    font-family: serif;
    display: flex;
    justify-content: center;
    align-items: center; */
  }

  /deep/.jeesite-basic-arrow{
    display: none !important;
  }
</style>
